<template>
  <el-dialog
    title="编辑代码"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName" type="card" style="margin-top: -30px">
      <el-tab-pane label="index.vue" name="index">
        <CodeEdit ref="indexCode" :oid="'indexCode'"/>
      </el-tab-pane>
      <el-tab-pane label="form.vue" name="form" v-if="editCode">
        <CodeEdit ref="editCode" oid="editCode"/>
      </el-tab-pane>
      <el-tab-pane label="pageConfig.js" name="pageConfig" v-if="pageConfig">
        <CodeEdit ref="pageConfig" oid="pageConfig"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import CodeEdit from './codeEdit.vue'
export default {
  name: "CodeView",
  components: {
    CodeEdit
  },
  data() {
    return {
      dialogVisible: false,
      indexCode: "",
      editCode: "",
      pageConfig: "",
      activeName: "index",
    };
  },
  mounted() {},
  methods: {
    init(row) {
      this.indexCode = row.indexCode;
      this.editCode = row.editCode;
      this.pageConfig = row.pageConfig;

      this.dialogVisible = true;

      this.$nextTick(() => {
        this.activeName = "index";
        this.$refs.indexCode.init({code: row.indexCode, oid: 'indexCode'});
        if(this.editCode) this.$refs.editCode.init({code: row.editCode, oid: 'editCode'});
        if(this.pageConfig) this.$refs.pageConfig.init({code: row.pageConfig, oid: 'pageConfig', lang: 'javscript'});
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.indexCode.destroy();
      if(this.editCode) this.$refs.editCode.destroy();
      if(this.pageConfig) this.$refs.pageConfig.destroy();
    },
  },
};
</script>
